<template>
    <div style="background-color: #041c30">
      <!-- <canvas id="canvas" width="800" height="600" ></canvas> -->
      <div class="mainDiv canshushezhicssz" style="
          justify-content: space-between;
          flex-direction: row;
          height: calc(100vh - 200px);
        ">
        <div class="chouti">
          <div class="choutibox">
            <div class="choutileft_header">
              <div class="shousuo">收缩</div>
              <div><img class="shousuo" src="../assets/箭头右.png" alt="" /></div>
            </div>
            <div class="choutileft_main">
              <div class="main_left cssz">
                <div class="r" style="position: relative; z-index: 9999; width: 100%; background-color: #041c30;">
                  <div class="stage_c_r main_3 zssz_c" style="width: 50%">
                    <div class="t">
                      <div class="react">
                        <i class="l_up"></i>
                        <i class="l_down"></i>
                        <i class="r_up"></i>
                        <i class="r_down"></i>
                        <div class="title">
                          <span>通用参数设置</span>
                        </div>
                      </div>
                    </div>
                    <div class="d d2">
                      <div id="editDiv">
                        <h1 id="editH1"></h1>
                        <div class="">
                          <input type="number" name="" value="" />
                          <input type="number" name="" value="" />
                          <span>确认</span>
                        </div>
                      </div>
                      <div class="envent_d" id="zbf_edit_cur" @dblclick="openEditPanel">
                        <p>
                          <span>超低温</span>
                          <span key-str="tsl" label="超低温">{{ canshuData.tsl }}</span>
                        </p>
                        <p>
                          <span>超高温</span>
                          <span key-str="tsh" label="超高温">{{ canshuData.tsh }}</span>
                        </p>
                        <p>
                          <span>低温</span>
                          <span key-str="tl" label="低温">{{ canshuData.tl }}</span>
                        </p>
                        <p>
                          <span>高温</span>
                          <span key-str="th" label="高温">{{ canshuData.th }}</span>
                        </p>
                        <p>
                          <span>A层温度场加成系数</span>
                          <span key-str="ta" label="A层温度场加成系数">{{ canshuData.ta }}</span>
                        </p>
                        <p>
                          <span>B层温度场加成系数</span>
                          <span key-str="tb" label="B层温度场加成系数">{{ canshuData.tb }}</span>
                        </p>
                        <p>
                          <span>C层温度场加成系数</span>
                          <span key-str="tc" label="C层温度场加成系数">{{ canshuData.tc }}</span>
                        </p>
                        <p>
                          <span>D层温度场加成系数</span>
                          <span key-str="td" label="D层温度场加成系数">{{ canshuData.td }}</span>
                        </p>
                        <p>
                          <span>S层温度场加成系数</span>
                          <span key-str="ts" label="S层温度场加成系数">{{ canshuData.ts }}</span>
                        </p>
                        <p>
                          <span>温度场2*2内中外环系数</span>
                          <span key-str="t22" label="温度场2*2内中外环系数">{{ canshuData.t22 }}</span>
                        </p>
                        <p>
                          <span>温度场4*4内中外环系数</span>
                          <span key-str="t44" label="温度场4*4内中外环系数">{{ canshuData.t44 }}</span>
                        </p>
                        <p>
                          <span>温度场6*6内中外环系数</span>
                          <span key-str="t66" label="温度场6*6内中外环系数">{{ canshuData.t66 }}</span>
                        </p>
                        <p>
                          <span>超短距</span>
                          <span key-str="dss" label="超短距">{{ canshuData.dss }}</span>
                        </p>
                        <p>
                          <span>超长距</span>
                          <span key-str="dsl" label="超长距">{{ canshuData.dsl }}</span>
                        </p>
                        <p>
                          <span>短距</span>
                          <span key-str="ds" label="短距">{{ canshuData.ds }}</span>
                        </p>
                        <p>
                          <span>长距</span>
                          <span key-str="dl" label="长距">{{ canshuData.dl }}</span>
                        </p>
                        <p>
                          <span>超不稳</span>
                          <span key-str="ssu" label="超不稳">{{ canshuData.ssu }}</span>
                        </p>
                        <p>
                          <span>不稳</span>
                          <span key-str="su" label="不稳">{{ canshuData.su }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
  
                  <div class="stage_c_r main_3 zssz_c" style="height: 100%; width: 50%">
                    <div class="t">
                      <div class="react">
                        <i class="l_up"></i>
                        <i class="l_down"></i>
                        <i class="r_up"></i>
                        <i class="r_down"></i>
                        <div class="title">
                          <span>点位参数设置</span>
                        </div>
                      </div>
                    </div>
                    <div class="d d2">
                      <div id="editDiv1">
                        <h1 id="editH12"></h1>
                        <div class="">
                          <input type="text" name="" value="" />
                          <span>确认</span>
                        </div>
                      </div>
                      <!--  -->
                      <div class="envent_u1">
                        <span>点位</span>
                        <span>停机红外直流</span>
                        <span>温度分析值</span>
                        <span>着火距离分度值</span>
                        <span>燃烧稳定性分度值</span>
                      </div>
                      <div class="csszenvent_d" id="zbf_edit_cur1" @dblclick="openEditPanel"></div>
                      <div id="edit_pointer_panel">
                        <span class="label">{{ currentEditPointerLabel }}</span>
                        <div>
                          <input ref="inputEl" type="text" v-model="currentEditPointerValue" @keydown.esc="closeEditPanel" @keydown.enter="savePointerData" />
                          <button type="button" @click="closeEditPanel">取 消</button>
                          <button type="button" @click="savePointerData">保 存</button>
                        </div>
                      </div>
                    </div>
                    <div class="kaiset">
                      <!-- <div class="name_xitu">初始化分配率系数</div>
                      <div class="btn-submit">开始</div>
                      <div class="btn-submit btn-colse">结束</div>
                      <div class="btn-submit btn-source">source弹窗</div> -->
                    </div>
                  </div>
                </div>
              </div>
              <div class="main_right">
                <div class="flex-box">
                  <div class="canshupost">
                    <!-- <div class="canshuwendu">温度分析值</div> -->
                    <div class="canshupost-close">
                      <div class="hearder">
                        <div></div>
                        <div class="close-box">x</div>
                      </div>
                      <div class="settom">
                        <div>
                          <span>算法</span>
                          <select class="select-box">
                            <option value="1"></option>
                            <option value="2"></option>
                          </select>
                        </div>
                        <div class="inp-setbox">
                          <div class="inp-cs">参数1</div>
                          <div class="inpu-value valinput">
                            <input type="text" value="12" style="width: 90px; height: 20px" />
                          </div>
                        </div>
                        <div class="inpVal">
                          <div class="inp-setbox">
                            <div class="inp-cs">参数2</div>
                            <div class="inpu-value csninput">
                              <input type="text" value="12" style="width: 90px; height: 20px" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="btn-box">
                        <div class="btn-set">
                          <button type="button">删除</button>
                        </div>
                        <div class="btn-set1">
                          <button type="button">确定</button>
                        </div>
                      </div>
                    </div>
                    <div class="canshupost-cont">
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A1</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A2</div>
  
                        <div class="fotos-post"></div>
  
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A3</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A4</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                    </div>
                  </div>
                  <div class="canshupost">
                    <!-- <div class="canshuwendu">着火距离分度值</div> -->
                    <div class="canshupost-close">
                      <div class="hearder">
                        <div></div>
                        <div class="close-box">x</div>
                      </div>
                      <div class="settom">
                        <div>
                          <span>算法</span>
                          <select class="select-box">
                            <option value="1"></option>
                            <option value="2"></option>
                          </select>
                        </div>
                        <div class="inp-setbox">
                          <div class="inp-cs">参数1</div>
                          <div class="inpu-value valinput">
                            <input type="text" value="12" style="width: 90px; height: 20px" />
                          </div>
                        </div>
                        <div class="inpVal">
                          <div class="inp-setbox">
                            <div class="inp-cs">参数2</div>
                            <div class="inpu-value csninput">
                              <input type="text" value="12" style="width: 90px; height: 20px" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="btn-box">
                        <div class="btn-set">
                          <button type="button">删除</button>
                        </div>
                        <div class="btn-set1">
                          <button type="button">确定</button>
                        </div>
                      </div>
                    </div>
                    <div class="canshupost-cont">
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A1</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A2</div>
  
                        <div class="fotos-post"></div>
  
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A3</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A4</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                    </div>
                  </div>
                  <div class="canshupost">
                    <!-- <div class="canshuwendu">燃烧稳定性分度值</div> -->
                    <div class="canshupost-close">
                      <div class="hearder">
                        <div></div>
                        <div class="close-box">x</div>
                      </div>
                      <div class="settom">
                        <div>
                          <span>算法</span>
                          <select class="select-box">
                            <option value="1"></option>
                            <option value="2"></option>
                          </select>
                        </div>
                        <div class="inp-setbox">
                          <div class="inp-cs">参数1</div>
                          <div class="inpu-value valinput">
                            <input type="text" value="12" style="width: 90px; height: 20px" />
                          </div>
                        </div>
                        <div class="inpVal">
                          <div class="inp-setbox">
                            <div class="inp-cs">参数2</div>
                            <div class="inpu-value csninput">
                              <input type="text" value="12" style="width: 90px; height: 20px" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="btn-box">
                        <div class="btn-set">
                          <button type="button">删除</button>
                        </div>
                        <div class="btn-set1">
                          <button type="button">确定</button>
                        </div>
                      </div>
                    </div>
                    <div class="canshupost-cont">
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A1</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A2</div>
  
                        <div class="fotos-post"></div>
  
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A3</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                      <!-- <div class="canshupost-box">
                        <div class="canshupost-center">A4</div>
                        <div class="fotos-post"></div>
                        <div class="canshupost-add">+</div>
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tanchuangSoure">
            <div class="tangchangClose">
              <div class="close">X</div>
            </div>
            <div class="TanChanglist">
              <div class="TanChangBox">
                <div class="TanChangBox-source">紫外交流</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
              <div class="TanChangBox">
                <div class="TanChangBox-source">紫外直流</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
              <div class="TanChangBox">
                <div class="TanChangBox-source">红外特征1</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
              <div class="TanChangBox">
                <div class="TanChangBox-source">红外特征2</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
              <div class="TanChangBox">
                <div class="TanChangBox-source">红外直流</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
              <div class="TanChangBox">
                <div class="TanChangBox-source">可见光交流1</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
              <div class="TanChangBox">
                <div class="TanChangBox-source">可见光交流2</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
              <div class="TanChangBox">
                <div class="TanChangBox-source">可见光直流</div>
                <div class="TanChangBox-close">
                  <div class="TanChangBox-hearder">
                    <div></div>
                    <div class="TanChangBox-close-box">x</div>
                  </div>
                  <div class="TanChangBox-settom">
                    <div>
                      <span>算法</span>
                      <select class="TanChangBox-select-box">
                        <option value="1"></option>
                        <option value="2"></option>
                      </select>
                    </div>
                    <div class="TanChangBox-inp-setbox">
                      <div class="TanChangBox-inp-cs">参数1</div>
                      <div class="TanChangBox-inpu-value TanChangBox-valinput">
                        <input type="text" value="12" style="width: 90px; height: 20px" />
                      </div>
                    </div>
                    <div class="TanChangBox-inpVal">
                      <div class="TanChangBox-inp-setbox">
                        <div class="TanChangBox-inp-cs1">参数2</div>
                        <div class="TanChangBox-inpu-value TanChangBox-csninput">
                          <input type="text" value="12" style="width: 90px; height: 20px" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="TanChangBox-btn-box">
                    <div class="TanChangBox-btn-set">
                      <button type="button">删除</button>
                    </div>
                    <div class="TanChangBox-btn-set1">
                      <button type="button">确定</button>
                    </div>
                  </div>
                </div>
                <div class="TanChangBox-canshupost-cont">
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A1</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A2</div>
  
                    <div class="TanChangBox-fotos-post"></div>
  
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A3</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                  <div class="TanChangBox-canshupost-box">
                    <div class="TanChangBox-canshupost-center">A4</div>
                    <div class="TanChangBox-fotos-post"></div>
                    <div class="TanChangBox-canshupost-add">+</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="zhankai">
          <div><img src="../assets/箭头左.png" alt="" /></div>
          <div class="zhankaitext">展开</div>
        </div>
  
        <div class="ls_maincont"></div>
  
        <div style="background-color: #041c30; width: 100%">
  
          <div class="outer-container">
            <div class="search-form-panel">
              <el-form :model="searchData" label-width="120">
                <el-form-item label="定制查询" prop="type">
                  <el-radio :value="0" v-model="searchData.type" style="width: 20px;"></el-radio>
                </el-form-item>
                <el-form-item label="开始时间" prop="valueStart">
                  <el-input-number :min="0" v-model="searchData.valueStart" :disabled="searchData.type === 1" style="width: 120px" />
                  <el-select v-model="searchData.unitStart" style="width: 80px" :disabled="searchData.type === 1">
                    <el-option v-for="(item, index) in TIME_UNIT" :key="index" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                  <span style="margin-left: 4px;">前</span>
                </el-form-item>
                <el-form-item label="结束时间" prop="unitEnd">
                  <el-input-number :min="0" v-model="searchData.valueEnd" style="width: 120px" :disabled="searchData.type === 1" />
                  <el-select v-model="searchData.unitEnd" style="width: 70px" :disabled="searchData.type === 1">
                    <el-option v-for="(item, index) in TIME_UNIT" :key="index" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                  <span style="margin-left: 4px;">前</span>
                </el-form-item>
                <el-form-item label="数据间隔">
                  <el-input-number :min="0" v-model="searchData.value" style="width: 120px"></el-input-number>
                  <el-select v-model="searchData.unit" style="width: 70px">
                    <el-option v-for="(item, index) in TIME_UNIT" :key="index" :value="item.value" :dianjitioazhuanlabel="item.label"></el-option>
                  </el-select>
                  <span style="margin-left: 4px;">前</span>
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" @click="toAddSDZ" >添加</el-button>
                </el-form-item>
                <el-form-item label="最小值" style="display: none;">
                  <el-input-number :min="1" v-model="searchData.min" style="width: 140px" />
                </el-form-item>
              </el-form>
              <el-form :model="searchData" label-width="120">
                <el-form-item label="自定义查询">
                  <el-radio :value="1" v-model="searchData.type" style="width: 20px;"></el-radio>
                </el-form-item>
                <el-form-item label="开始时间">
                  <el-config-provider :locale="zhCn">
                    <el-date-picker v-model="timeRange" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" :disabled="searchData.type === 0" :default-time="[initStratTime, initEndTime]" style="width: 526px" format="YYYY-MM-DD HH:mm:ss" />
                  </el-config-provider>
                </el-form-item>
                <el-form-item label="特征值">
                  <el-select class="sdz-select" :teleported="false" v-model="searchData.sdzs" multiple collapse-tags clearable placeholder="请选择特征值" style="width: 209px">
                    <el-option v-for="(item, index) in sdzOptions" :value="index" :label="item.description" :key="index">
                      {{ item.description }}
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="最大值" style="display: none;">
                  <el-input-number :min="1" v-model="searchData.max" style="width: 140px" />
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" @click="searchHistoryData">叠加历查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="echarts-panel" id="history_echarts" v-loading="loading">
            </div>
            <div class="result-table-panel">
              <div class="popover-container" v-show="popOverVisible" :style="poperStyle">
                <span @click="toAddSDZ">添加</span>
                <span @click="toDeleteSDZ">删除</span>
              </div>
              <el-table v-loading="loading" ref="multipleTableRef" size="small" @row-click="changeMinMax" @row-contextmenu="addOrDelete" :data="resultTableData" :border="true" style="width: 80%; height: 200px;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :align="'center'" />
                <el-table-column prop="seq" label="序号" width="60" :align="'center'" />
                <!-- <el-table-column prop="name" label="名称" width="200" /> -->
                <el-table-column prop="description" label="描述" width="200" />
                <el-table-column prop="unit" label="单位" width="80" />
                <el-table-column prop="v" label="当前值" width="120" />
                <el-table-column prop="avg" label="平均值" width="100" />
                <el-table-column prop="cursorVal" label="光标值" width="100" />
                <el-table-column prop="max" label="上限" width="120">
                  <template #default="{ row }">
                    <el-input v-model="row.max" size="small" @change="changeMinMax" />
                  </template>
                </el-table-column>
                <el-table-column prop="min" label="下限" width="120">
                  <template #default="{ row }">
                    <el-input v-model="row.min" size="small" @change="changeMinMax" />
                  </template>
                </el-table-column>
                <el-table-column prop="maxTime" label="最大值时刻" width="180" />
                <el-table-column prop="minTime" label="最小值时刻" width="180" />
              </el-table>
              <el-dialog v-model="dialogVisible" width="450">
                <el-form label-width="100" label-position="left" style=" padding-top: 10px;" label-suffix=":">
                  <el-form-item prop="filterValue" label="查找内容">
                    <el-input v-model="filterValue" placeholder="过滤" style="width: 200px"></el-input>
                    <el-button style="position: absolute; right: 20px;" type="primary" @click="toSearchSdz">查找</el-button>
                  </el-form-item>
                </el-form>
                <el-table ref="dialogTableComp" :data="dialogTableData" size="small" :border="true" style="height: 400px;">
                  <el-table-column type="selection" width="55" :align="'center'" />
                  <el-table-column prop="seq" label="序号" width="60" :align="'center'" />
                  <el-table-column prop="description" label="描述" width="200" />
                </el-table>
                <template #footer>
                  <div class="dialog-footer">
                    <el-button type="primary" @click="toConfirmDialog">确认</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                  </div>
                </template>
              </el-dialog>
            </div>
          </div>
  
        </div>
  
  
  
  
      </div>
    </div>
  
    <div class="stage_t">
        <div class="stage_t_left">  
            <img src="../assets/logins.jpg" alt=""> <span>国能怀安热电有限公司</span>
       </div>
       <div  class="stage_t_zhong">燃烧数字化监测与可视化系统</div>
       <div  class="stage_t_right">
           <img src="../assets/timer.png" alt=""> <span>{{ nowTime }}</span>
       </div>
      </div>
  </template>
  
  
  <script setup>

  import { ref, reactive, onMounted, nextTick, watch } from "vue";
  import { formatTime, formatDate } from "../utils/date.js";
  import { parameter, setParameter, getSDZlist, history, history0, searchSdz } from "../api/canshushezhi.js";
  import * as echarts from "echarts";
  import { ElMessage } from 'element-plus'
  import { ElConfigProvider } from 'element-plus'
  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  let chouti = ref("");
  let zhankais = ref("");
  const nowTime = ref("");
const loading = ref(false);
// 获取当前日期
const today = new Date();
// 获取十天前的日期
const initStratTime = new Date(today);
initStratTime.setDate(today.getDate() - 10);

// 将十天前的日期设置为零时
initStratTime.setHours(0, 0, 0, 0);

// 获取今日的日期
const initEndTime = new Date(today);
// 将今日的日期设置为24时
initEndTime.setHours(23, 59, 59, 999);

const timeRange = ref([initStratTime, initEndTime]);

const TIME_UNIT = [
    { value: 'd', label: '天' },
    { value: 'h', label: '时' },
    { value: 'm', label: '分' },
    { value: 's', label: '秒' },
];

let searchData = reactive({
    type: 0, //	默认定制查询0自定义查询1		
    valueStart: 0, //	定制追溯开始时间正整数		
    unitStart: "d", //	默认定制查询开始时间单位秒s分m时h天d，和自定义查询互斥（按钮置灰）		
    valueEnd: 0, //	定制追溯结束时间正整数		
    unitEnd: "d", //	默认定制查询结束时间单位秒s分m时h天d，和自定义查询互斥（按钮置灰）		
    value: 1, //	间隔数值正整数		
    unit: "h", //	查询间隔时间单位秒s分m时h天d		
    min: 0, //	过滤最小值		
    max: 2000, //	过滤最大值		
    sdzs: [],
});


const selectSDZArr = reactive([])
let myChart;
const serieData = reactive([])
const legendData = reactive([])
let timeoutCounter = -1;
// watch(
//     () => searchData.sdzs.length,
//     (sdzs) => {
//         if (timeoutCounter !== -1) {
//             timeoutCounter = -1
//             clearTimeout(timeoutCounter)
//         }
//         timeoutCounter = setTimeout(function () {
//             timeoutCounter = -1
//             searchHistoryData()
//         }, 200)
//         // if (sdzs.length > 4) {
//         //     nextTick(() => {
//         //         ElMessage({
//         //             type: 'warning',
//         //             message: `SDZ最多只能选择4组数据`,
//         //         })
//         //     })
//         // }
//     }
// )


// 修改表格中的光标列

const changeValue = (arr) => {
    if (arr && arr.length > 0) {
        let selection = multipleTableRef.value.getSelectionRows()
        for (let i = 0; i < selection.length; i++) {
            if (arr[i] && arr[i].data) {
                selection[i].cursorVal = arr[i].data[1]
            } else {
                selection[i].cursorVal = ''
            }
        }
    }
}

const optionObj = {
    // 设置的是标题
    title: {
        text: '历史曲线'
    },
    tooltip: {
        trigger: 'axis',
        formatter: (c) => {
            let str = ''
            let temp = {
                showTime: '', // 时间
                marker: '', // 颜色
                seriesName: '', // legend名称
                valueData: '', // 数值
                setWidthSpan: '',
            }
            c.forEach((item) => {
                temp.showTime = item.data[0]
                temp.marker = item.marker
                temp.seriesName = item.seriesName
                temp.valueData = item.value[2]
                temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
                str += temp.marker + temp.seriesName + temp.setWidthSpan + temp.valueData + '<br />'
            })
            changeValue(c)
            return temp.showTime + '<br />' + str
        },
    },
    // 网格间距设置
    grid: {
        top: '40px',
        bottom: '50px',
        left: '60px',
        right: '60px',
        containLabel: true
    },
    dataZoom: [
        {
            type: 'slider',
            show: true,
            brushSelect: false,
            xAxisIndex: [0],
        },
        {
            type: 'slider',
            show: true,
            brushSelect: false,
            yAxisIndex: [0],
            left: '0%',
        },
        {
            type: 'inside',
            xAxisIndex: [0],
        },
        {
            type: 'inside',
            yAxisIndex: [0],
        }
    ],
    
    xAxis: {
        // xAxis的下不在设置data属性共享时间`
        type: 'time',
        splitLine: { show: true },
        lineStyle: {
            width: 2
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            // 设置坐标轴上的时间格式
            formatter: function (value) {
                // console.log('时间戳', value)
                // 将时间转换为 JavaScript 日期对象  
                return backTime(value)
            },
            showMinLabel: true,
            showMaxLabel: true // 固定显示X轴的最后一条数据
        },
        // 更改x轴线的颜色
        axisLine: {
            lineStyle: {
                color: '#D2DBE6;',
                width: 1 // x轴线的宽度
            }
        },
    },
    yAxis: {
        type: 'value',
        splitLine: { show: true }
    }
}

// onMounted(async () => {
//     nowTime.value = formatTime(new Date());
//     setInterval(() => {
//         nowTime.value = formatTime(new Date());
//     }, 1000);
//     function $(el, all = false) {
//         if (all) return document.querySelectorAll(el);
//         return document.querySelector(el);
//     }

//     // 基于准备好的dom，初始化echarts实例
//     myChart = echarts.init(document.getElementById("history_echarts"), 'dark');

//     myChart.setOption(optionObj)

//     myChart.on('tooltip', function (params) {
//         // params 包含了当前鼠标所在的数据点信息
//         var seriesData = params.data; // 获取当前鼠标所在的数据点
//     });

//     // 请求接口的
//     await setSdzListData()
//     if (sdzOptions.length > 0) {
//         // searchData.sdzs.push(0, 1, 2, 3)
//         // searchHistoryData()
//     }
//  // 展开点击
//     $(".choutileft_header").onclick = function () {
//       $(".chouti").className = "chouti slide-out-right";
//       $(".zhankai").className = "zhankai slide-in-blurred-right";
//       setTimeout(function () {
//         $(".chouti").style.display = "none";
//       }, 800);
//     };
//     // 收缩点击
//     $(".zhankai").onclick = function () {
//       $(".chouti").style.display = "block";
//       $(".chouti").className = "chouti slide-in-blurred-right";
//       $(".zhankai").className = "zhankai slide-out-right";
//     };


// });
onMounted(async () => {
    setInterval(() => {
      nowTime.value = formatTime(new Date());
    });
    function $(el, all = false) {
      if (all) return document.querySelectorAll(el);
      return document.querySelector(el);
    }
    // 展开点击
    $(".choutileft_header").onclick = function () {
      $(".chouti").className = "chouti slide-out-right";
      $(".zhankai").className = "zhankai slide-in-blurred-right";
      setTimeout(function () {
        $(".chouti").style.display = "none";
      }, 800);
    };
    // 收缩点击
    $(".zhankai").onclick = function () {
      $(".chouti").style.display = "block";
      $(".chouti").className = "chouti slide-in-blurred-right";
      $(".zhankai").className = "zhankai slide-out-right";
    };
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById("history_echarts"), 'dark');
  
    myChart.setOption(optionObj)
  
    myChart.on('tooltip', function (params) {
      // params 包含了当前鼠标所在的数据点信息
      var seriesData = params.data; // 获取当前鼠标所在的数据点
      console.log(seriesData);
    });
  
    // 请求接口的
    await setSdzListData()
    if (sdzOptions.length > 0) {
      // searchData.sdzs.push(0, 1, 2, 3)
      // searchHistoryData()
    }
    //  页面加载动画
    // doAjax()
    obj()
  });
  


const sdzOptions = reactive([])
// 设置SDZ数据
const setSdzListData = async () => {
    let sdzRes = await getSDZlist();
    console.log(sdzRes);
    if (sdzRes.status !== 200) {
        return
    }
    sdzOptions.push(...sdzRes.data)
}
const resultTableData = reactive([])
// 时间前面➕0
function backTime(value) {
    let date = new Date(value);
    // 获取年份、月份和日期  
    let year = date.getFullYear();
    let month = date.getMonth() + 1; // 月份从 0 开始，需要加 1  
    let day = date.getDate();

    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    // 格式化月份和日期为两位数（不足两位时补零）  
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;

    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    // 返回格式化后的字符串  
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
const multipleTableRef = ref(null)
let setInitSelected = true
// 历史曲线查询
const searchHistoryData = async (isDialog = false) => {
    timeoutCounter = -1
    clearTimeout(timeoutCounter)
    let params = JSON.parse(JSON.stringify(searchData));
    if (params.type === 1) {
        params.startTime = formatDate(timeRange.value[0])
        params.endTime = formatDate(timeRange.value[1])
    }
    if (isDialog === true) {
        params.sdzs = [...selectSDZArr]
    } else {
        if (!params.sdzs || params.sdzs.length < 1) {
            ElMessage({
                type: 'warning',
                message: `请选择特征值信息！`,
            })
            return;
        } else {
            const sdzsTemp = []
            params.sdzs.forEach(i => {
                sdzsTemp.push({
                    seq: sdzOptions[i].seq,
                    table0: sdzOptions[i].table0,
                    column0: sdzOptions[i].column0,
                    description: sdzOptions[i].description,
                })
            })
            params.sdzs = sdzsTemp
        }
    }
    loading.value = true
    let res = await history0(params);
    loading.value = false
    if (res.status === 200) {
        myChart.clear();
        setInitSelected = true
        // const tempArr = selectSDZArr.slice(resultTableData.length)
        resultTableData.length = 0
        serieData.length = 0
        legendData.length = 0
        res.data.forEach((item, i) => {
            if (isDialog !== true) {
                selectSDZArr.length = 0
                searchData.sdzs?.forEach(i => {
                    selectSDZArr.push({ seq: searchData.sdzs[i], ...sdzOptions[i] })
                })
            };
            resultTableData.push(item)
            let description = item.description = item.description || `description_${selectSDZArr[i]?.seq}`
            legendData.push({ name: description })
            serieData.push({
                "name": description,
                "type": "line",
                "symbol": "none",
                "connectNulls": true,
                "showAllSymbol": true,
                // 让每一条折线拥有数据自己的时间
                "data": item.avgs.map(item => [item.t, item.y, item.avg]),
                "unit": "%",
                "markPoint": {
                    "symbol": "rect",
                    "symbolSize": "12",
                    "label": { "show": false },
                    "tooltip": { "triggerOn": "click", "trigger": "item" },
                }
            })
        });
        myChart.setOption(optionObj)
        myChart.setOption({
            series: serieData,
            legend: {
                data: legendData
            },
            // y轴坐标
            yAxis: {
                max:  res.data[0].max,
                min: 0,
            }
        });
        nextTick(() => {
            multipleTableRef.value.toggleAllSelection()
            myChart.getOption()
        })
    } else if(res.status === 501) {
        ElMessage({
                type: 'error',
                message: res.message,
                offset: window.screen.height / 3,
        })
        return;
    } else if(res.status === 502) {
        ElMessage({
                type: 'error',
                message: res.message,
                offset: window.screen.height / 3,
               
        })
        return;
    }
};

const handleSelectionChange = (selection) => {
    const legendSelected = {}
    legendData.forEach((item, i) => {
        if (selection.find(
            row => {
                if (row.description) {
                    return row.description === item.name
                } else {
                    return row.seq == item.name.split('_')[1]
                }
            })
        ) {
            legendSelected[item.name] = true
        } else {
            legendSelected[item.name] = false
        }
    })
    myChart.setOption({ legend: { selected: legendSelected } })
}


const poperStyle = reactive({
    left: 0,
    top: 0,
    bottom: 'unset',
})


const popOverVisible = ref(false)
// 添加或删除 sdz
const currentClickNo = ref(-1)
const addOrDelete = (row, col, $event) => {
    $event.preventDefault();
    popOverVisible.value = true
    poperStyle.left = $event.pageX + 'px'
    // poperStyle.top = $event.pageY + 'px'
    // poperStyle.left = $event.clientX + 'px'
    poperStyle.top = ($event.y - 55) + 'px'
    currentClickNo.value = row.seq

    let clickHiddenEventFunc = function () {
        popOverVisible.value = false
        document.removeEventListener('click', clickHiddenEventFunc)
    }
    clickHiddenEventFunc = document.addEventListener('click', clickHiddenEventFunc)
}
const toAddSDZ = () => {
    dialogVisible.value = true
    // nextTick(() => {
    //     if (setInitSelected) {
    //         dialogTableComp.value.toggleAllSelection()
    //         nextTick(() => {
    //             dialogTableComp.value.getSelectionRows().forEach(row => {
    //                 if (selectSDZArr.find(item => item.seq === row.seq)) {
    //                     dialogTableComp.value.toggleRowSelection(row, true)
    //                 } else {
    //                     dialogTableComp.value.toggleRowSelection(row, false)
    //                     console.log(row.seq)
    //                 }
    //             })
    //         })
    //         setInitSelected = false
    //     }
    // })
}

const toDeleteSDZ = () => {
    if (currentClickNo.value > -1) {
        let deleteIndex = 0
        selectSDZArr.forEach((item, i) => {
            if (item.seq === currentClickNo.value) {
                deleteIndex = i
            }
        })
        selectSDZArr.splice(deleteIndex, 1)
        searchData.sdzs = searchData.sdzs.filter(i => sdzOptions[i].seq !== currentClickNo.value)
        currentClickNo.value = -1
        searchHistoryData(true)
    }
}

const changeMinMax = (row, col) => {
    if (col.type === 'selection') return
    myChart.setOption({
        yAxis: {
            max: Number(row.max),
            min: Number(0),
        }
    })
}
const filterValue = ref('')
const dialogVisible = ref(false)

watch(
    () => dialogVisible.value,
    (newVal) => {
        if (newVal) {
            dialogTableData.length = 0
            dialogTableData.push(...sdzOptions)
        }
    }
)

// 模糊查询点表
const dialogTableData = reactive([])
const toSearchSdz = () => {
    searchSdz(filterValue.value).then(res => {
        if (res.status === 200) {
            dialogTableData.length = 0
            dialogTableData.push(...res.data)
        }
    })
}

const dialogTableComp = ref(null)
// 弹窗确认按钮
const toConfirmDialog = () => {
    const rows = dialogTableComp.value.getSelectionRows()
    selectSDZArr.push(...rows)
    searchHistoryData(true)
    dialogVisible.value = false
}
  
  
  
  // 历史
  const pointArr = reactive([
    "A1",
    "A2",
    "A3",
    "A4",
    "B1",
    "B2",
    "B3",
    "B4",
    "C1",
    "C2",
    "C3",
    "C4",
    "D1",
    "D2",
    "D3",
    "D4",
    "E1",
    "E2",
    "E3",
    "E4",
    "F1",
    "F2",
    "F3",
    "F4",
    "S1",
    "S2",
    "S3",
    "S4",
  ]);
  
  const lavelMap = {
    i: "停机红外直流",
    t: "温度分析值",
    d: "着火距离分度值",
    s: "燃烧稳定性分度值",
  };
  
  
  
  
  // 动态生成点位参数设置信息
  function setPointerValue() {
    const keySuffix = ["-label", "i", "t", "d", "s"];
    let containerEl = document.getElementById("zbf_edit_cur1");
    for (let index = 0; index < pointArr.length; index++) {
      const name = pointArr[index];
      let pEl = document.createElement("p");
      for (let j = 0; j < 5; j++) {
        let spanEl = document.createElement("span");
        // 设置key属性
        let key = "";
        if (name.length === 2) {
          key = name.toLowerCase() + keySuffix[j];
        } else if (name[0] === "S") {
          key = "s" + name[4] + keySuffix[j];
        } else {
          key = "location";
        }
        if (j !== 0) {
          spanEl.setAttribute("key-str", key);
          spanEl.setAttribute("label", `${name} - ${lavelMap[keySuffix[j]]}`);
        }
        spanEl.innerText = j === 0 ? name : (canshuData[key] || '-');
        pEl.appendChild(spanEl);
      }
      containerEl.appendChild(pEl);
    }
  }
  // ///////////////////////////////////////////
  let currentEditPointerLabel = ref(""); // 当前编辑字段的label
  let currentEditPointerKey = ref(""); // 当前编辑字段的key
  let currentEditPointerValue = ref(0); // 当前编辑字段的value
  const inputEl = ref(null);
  
  // 打开编辑面板且设置当前编辑的label和value
  function openEditPanel(e) {
    let panelEl = document.getElementById("edit_pointer_panel");
    if (e.target.tagName !== "SPAN" || !e.target.getAttribute("key-str")) {
      return;
    }
    let spanEl = document.getElementsByClassName("editing")[0];
    console.log(spanEl);
    if (spanEl) spanEl.classList.remove("editing");
    // 显示并移动编辑面板   
    panelEl.style.display = "inline-block";
    console.log('e', e)
    panelEl.style.top = e.y - 30 + "px";
    panelEl.style.left = e.x - 145 + "px";
    let key = e.target.getAttribute("key-str");
    let label = e.target.getAttribute("label");
    currentEditPointerLabel.value = label;
    currentEditPointerKey.value = key;
    currentEditPointerValue.value = canshuData[key];
    // 获得焦点
    inputEl.value.focus();
    // 全选文本
    setTimeout(() => inputEl.value.select(), 50);
    // 高亮显示当前的编辑的元素
    e.target.classList.add("editing");
  }
  
  // 关闭编辑面板
  function closeEditPanel() {
    let panelEl = document.getElementById("edit_pointer_panel");
    panelEl.style.display = "none";
    let spanEl = document.getElementsByClassName("editing")[0];
    spanEl.classList.remove("editing");
  }
  
  // 保存数据
  const savePointerData = async () => {
    let arr = [
      {
        parameter: currentEditPointerKey.value,
        v: currentEditPointerValue.value,
      },
    ];
    let res = await setParameter(arr);
  
    if (res.status === 200) {
      canshuData[currentEditPointerKey.value] = currentEditPointerValue.value;
      let spanEl = document.getElementsByClassName("editing")[0];
      if (spanEl) spanEl.innerText = currentEditPointerValue.value;
    }
    closeEditPanel();
  };
  // 后台返回的全部参数数据
  const canshuData = reactive({});
  
  // 获取数据
  let obj = async () => {
    let res = await parameter();
    if (res.status === 200) {
      for (let key in res.data) {
        canshuData[key] = res.data[key];
      }
      // 点位参数设置数据赋值
      setPointerValue();
    }
    console.log(res);
  };
  
  
  let dianjitioazhuan=()=>{
    router.push('kaiguanliang')
  }
  let dianjitioazhuanlishi=()=>{
    router.push('_shuzhicanshe_huaiandiejia_')
  }















  
  </script>
  
  <style lang="scss" scoped>
  .outer-container {
    position: relative;
    top: -13px;
    left: px;
    min-width: 1800px;
    height: calc(100vh - 45px);
    color: #000;
    background-color: #042c45;
  
    .search-form-panel {
      padding: 20px 150px;
      background-color: #042c45;
  
      .el-form {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
  
        &:last-child {
          .el-form-item {
            margin-bottom: 0;
          }
        }
  
        .el-form-item {
          margin-bottom: 10px;
          color: #FFF;
  
          &:deep(.el-form-item__label) {
            --el-text-color-regular: #FFF;
          }
        }
  
        .sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list) {
          width: 80vw;
          height: 50vh;
          display: flex;
          flex-wrap: wrap;
        }
  
        .sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list>li) {
          /* width: 200px; */
          flex: 20% 0 1;
          border-right: 1px solid #ccc;
        }
  
        .sdz-select:deep(.el-select-dropdown__wrap) {
          max-height: 50vh;
        }
  
        .sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after) {
          left: 20px;
          right: unset;
        }
  
        .sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item::before) {
          content: "";
          position: absolute;
          top: 50%;
          border: 1px solid #ccc;
          width: 14px;
          height: 14px;
          left: 18px;
          right: unset;
          border: 1px solid #606266;
          transform: translateY(-50%);
        }
  
        .sdz-select:deep(.el-select-dropdown__item) {
          padding-left: 40px;
        }
      }
    }
  
    .echarts-panel {
      width: 80%;
      margin: 0 auto;
      background-color: #100c2a;
      height: 500px;
      padding-top: 20px;
    }
  
    .result-table-panel {
      height: 200px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  
      >.el-table {
        background-color: #100c2a;
  
        &:deep(.cell) {
          text-wrap: nowrap;
        }
  
        ;
        $colorArr: #5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4, #ea7ccc;
  
        @for $i from 1 through length($colorArr) {
          :deep(tr.el-table__row:nth-child(9n + #{$i})) {
  
            .cell,
            .el-input__inner {
              color: nth($colorArr, $i);
            }
          }
        }
  
        &:deep(.el-table__cell) {
          background-color: #100c2a;
        }
  
        .el-input:deep(.el-input__wrapper) {
          box-shadow: unset;
          background-color: #100c2a;
  
          &.is-focus {
            box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
            background-color: #FFF;
          }
        }
      }
  
      .popover-container {
        position: absolute;
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
        background-color: #FFF;
        border: 1px solid #CCC;
        box-sizing: content-box;
        padding: 2px 2px;
        border-radius: 2px;
  
        span {
          display: inline-block;
          box-sizing: content-box;
          width: 80px;
          font-size: 12px;
          line-height: 26px;
          text-align: center;
          border-radius: 2px;
          color: #333;
  
          &:hover {
            background-color: #008AFF;
            color: #FFF;
          }
        }
  
      }
    }
  
  }
  </style>
  
  <style lang="css" scoped>
  .chouti,
  .choutileft_main {
    height: 100%;
  }
  
  .choutileft_main {
    height: 100%;
    overflow: auto;
  }
  
  .react .title.lishi>span {
    display: inline-block;
    font-size: 36px;
    /* color: #98e4f3; */
    padding-left: 34px;
    background: url(./assets/zjz.png) center left no-repeat;
    background-size: 22px;
  }
  
  .react .title.lishi {
    box-sizing: border-box;
    color: #fff;
    font-size: 28px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* width: 100%; */
    height: 100%;
    padding: 10px 20px;
    margin: 10px;
    /* background: rgb(0 188 255 / 10%); */
  }
  
  #zbf_edit_cur span {
    color: #00d4ff;
  }
  
  #zbf_edit_cur1:deep(span) {
    line-height: 60px;
    user-select: none;
  }
  
  #zbf_edit_cur1:deep(.editing) {
    border-color: yellowgreen;
  }
  
  input:focus {
    outline: none;
  }
  
  .cssz .zssz_c .csszenvent_d:deep(span:first-child),
  .csszenvent_d:deep(p span:first-child),
  .envent_u1:deep(span:first-child) {
    min-width: 100px;
  }
  
  #edit_pointer_panel {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 250px;
    height: 80px;
    padding: 10px 20px;
  
    background-color: #000;
    opacity: 0.9;
    color: #fff;
    font-size: 20px;
  }
  
  #edit_pointer_panel .label {
    display: block;
    padding: 10px 0;
  }
  
  #edit_pointer_panel>div {
    display: flex;
    align-items: flex-end;
  }
  
  #edit_pointer_panel button {
    width: 50px;
    height: 30px;
    border-style: none;
    line-height: 30px;
    background-color: #fff;
    color: #000;
    font-weight: 700;
    margin-left: 20px;
  }
  
  #edit_pointer_panel input {
    width: 100px;
    height: 30px;
    font-size: 20px;
    line-height: 25px;
    border-style: none;
    padding: 0 5px;
  }
  
  .dataApoiutes {
    height: 20px;
  }
  
  .search-panel {
    color: #FFF;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .customized-panel {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }
  
  .custom-panel {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .search-panel .form-item {
    width: 140px;
    display: flex;
  }
  
  .search-panel .form-item>label {
    display: inline-block;
    text-align: end;
    width: 80px;
    font-size: 14px;
    line-height: 20px;
    background: none;
    line-height: 20px;
    margin-right: 10px;
  }
  
  .search-panel .form-item>input[type="number"] {
    width: 50px;
  }
  
  .search-panel .form-item>select {
    width: 50px;
    height: 20px;
  }
  
  
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .search-panel .button-container button {
    width: 80px;
    padding: 0px 20px;
    background-color: #00d4ff;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    border-style: none;
    margin-left: 200px;
  }
  
  #history_echarts {
    width: 80vw;
    height: calc(100vh - 400px);
    margin: 10px auto;
  }
  
  .sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list) {
    width: 80vw;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
  }
  
  .sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list>li) {
    /* width: 200px; */
    flex: 20%;
    border-right: 1px solid #ccc;
  }
  
  .sdz-select:deep(.el-select-dropdown__wrap) {
    max-height: 50vh;
  }
  
  .sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after) {
    left: 20px;
    right: unset;
  }
  
  .sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item::before) {
    content: "";
    position: absolute;
    top: 50%;
    border: 1px solid #ccc;
    width: 14px;
    height: 14px;
    left: 18px;
    right: unset;
    border: 1px solid #606266;
    transform: translateY(-50%);
  }
  
  .sdz-select:deep(.el-select-dropdown__item) {
    padding-left: 40px;
  }
  </style>
  
  <style>
  html {
    overflow: hidden;
  }
  
  .sdz-cascader.sdz-cascader-0>.el-cascader-panel .el-cascader-menu:nth-child(1) label.el-checkbox,
  .sdz-cascader.sdz-cascader-0>.el-cascader-panel .el-cascader-menu:nth-child(2) label.el-checkbox {
    /* display: none; */
    visibility: hidden;
  }
  
  .stage_t {
    z-index: 1000
  }
  
  .stage_t a {
    height: 50px
  }
  
  .no-click {
    pointer-events: none;
  }
  </style>